<template>
  <div class="details">
    <div class="details-nav">
      <div class="left" @click="back"><i class="iconfont icon-left"></i></div>
      <div class="right"><i class="iconfont icon-fenxiang"></i></div>
    </div>
    <section class="details-wrapper" ref="detailsWrapper">
      <div class="details-container">
        <div class="detailsImg">
          <mt-swipe :auto="4000">
            <mt-swipe-item style="width: 100%;" v-for="item in banner" :key="item"><img :src="item" alt="">
            </mt-swipe-item>
          </mt-swipe>
        </div>
        <div class="main">
          <section class="box">
            <p class="title">{{list.productName}}</p>
            <p class="show">
          <span><b class="discount_price">{{list.price}}</b><a class="original_price">{{list.price*list.discount}}</a><a
            class="wenzi">购买即享全返</a></span>
              <span style="color: gray;font-size: 12px;">月<b class="sold_count">{{list.count}}</b>笔</span>
            </p>
            <!-- <p style="height: 30px;line-height: 30px;font-size: 12px;"><a style="color: red;margin-right: 14px;">积分</a><span style="color: gray">每消费10元获得一个积分!</span></p> -->
            <ul class="miaoshu">
              <li><img src="../../common/img/logo_detail.png" alt=""></li>
              <p>购物全返，返利宝天天看得见；分享锁粉，合伙人佣金可提现；咱的商城，够放心，放心购!</p>
            </ul>
          </section>
          <section class="zdcn">
            <p>咱的承诺</p>
            <ul>
              <li><img src="../../common/img/detail_m1.png" alt=""></li>
              <li><img src="../../common/img/detail_m2.png" alt=""></li>
              <li><img src="../../common/img/detail_m3.png" alt=""></li>
              <li><img src="../../common/img/detail_m4.png" alt=""></li>
            </ul>
            <ul style="margin-top: 0;margin-bottom:10px;font-size: 12px;">
              <li>正品保障</li>
              <li>7天退换货</li>
              <li>购物全选</li>
              <li>质量全选</li>
            </ul>
          </section>
          <ul class="gmxz">
            <li class="active tw_li">图文详情</li>
            <li class="gm_li">购买须知</li>
          </ul>
        </div>
      </div>
    </section>
    <section id="detail">
      <div class="top">
        <span class="imgBox"><img :src="photo" alt=""></span>
        <p v-show="showStock" class="price1">价格:{{everattr.extendVal*list.discount}}</p>
        <p v-show="showStock" class="stock1">
          <span>库存:{{everattr.stock}}</span>
          <!-- <span class="stock">22</span> -->
        </p>
        <p class="goodsName">
          <span class="box0"></span>
          <span class="box1"></span>
          <span class="box2"></span>
        </p>
        <span class="exitdetail" @click="exit()">×</span>
      </div>
      <div class="con">
        <div v-for="(items,index) in level" v-if="items.level==1" :keyid="items.keyId" :level="items.level">
          <p>{{items.descr}}</p>
          <li @click="attributes($event)" :id='item.keyId'
              :parentId="item.parentId" v-for="item in level"
              :keyid="item.keyId"
              v-if="item.parentId == items.keyId">{{item.name}}
          </li>
        </div>
      </div>
      <div class="foot">
        <span>购买数量</span>
        <span class="numBox">
              <button class="down" @click="changeCount(-1)">-</button>
              <input class="num" type="number" name="" v-model="num">
              <button class="up" @click="changeCount(1)">+</button>
            </span>
      </div>
      <p class="okBtn" @click="okBtn()">确定</p>
    </section>
    <footer>
      <ul>
        <li class="sc" @click="scshow()"><span class="iconfont icon-collect iconCollect"
                                               style="margin-top: 8px;"></span><span class="collect-text"
                                                                                     style="font-size: 10px;">收藏</span>
        </li>
        <li class="addCart" @click="add(1)">加入购物车</li>
        <li class="nowBuy" @click="add(2)">立即购买</li>
      </ul>
    </footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from '../../axios/axios';
  import BScroll from 'better-scroll'

  export default {
    data() {
      return {
        id: '',
        list: {},
        banner: [],
        level: {},
        oklist: [],
        nexusExtends: {},
        photo: [],
        price: '',
        stock: '',
        index: [],
        test: {},
        maps: {},
        everattr: {},
        nexusExtendId: '',
        num: 1,
        showStock: false,
        goWhere: 0,
        sc: false,
        shopIds: [],
        goods: {},
        shuxin: [],
      };
    },
    created() {

    },
    mounted() {
      var that = this;
      that.id = that.$route.query.id;
      var data = JSON.stringify({
        "actionName": "findById",
        "controllerName": "productInfo",
        "data": [that.id]
      });
      axios.post({
        data: data,
        callback(res) {
          console.log(res.data.data.product.attributes.length);
          if (res.data.data.collection) {
            that.sc = true;
            document.querySelector('.iconCollect').style.color = '#f4b429';
            document.querySelector('.collect-text').style.color = '#f4b429';
//              $('.sc').css('color','#f4b429')
          }
          that.list = res.data.data.product;
          that.banner = JSON.parse(res.data.data.product.image);
          that.photo = that.banner[0];
          that.level = res.data.data.product.attributes;
          that.nexusExtends = res.data.data.product.nexusExtends;
          that.$nextTick(() => {
            that._initScroll();
          });
        }
      })
    },
    methods: {
      add: function (i) {
        $('#detail').css('display', 'block');
        this.goWhere = i;
        console.log(this.goWhere)
      },
      exit: function () {
        $('#detail').css('display', 'none')
      },
      back: function () {
        this.$router.back(-1);
      },
      changeCount: function (val) {
        if (this.num == 1 && val == -1) {

        } else {
          this.num += val;
        }
      },
      attributes: function (e) {
        var maps = {};
        var extend = this.nexusExtends;
        var parent_id = e.currentTarget.getAttribute("parentId");
        var li = document.querySelectorAll("li[parentId='" + parent_id + "']");
        for (var x = 0; x < li.length; x++) {
          li[x].removeAttribute("style");
          li[x].removeAttribute("check");
        }

        e.currentTarget.setAttribute("style", "color: red;")
        e.currentTarget.setAttribute("check", true);
        var id = e.currentTarget.getAttribute('keyId');
        console.log(id)

        var div = document.querySelectorAll("div[level='1']");
        var li = document.querySelectorAll("li[check='true']")
        if (div.length == li.length) {
          console.log(true);
          var id = 0;
          var list = [];

          for (var x = 0; x < li.length; x++) {
            var keyId = li[x].getAttribute("keyId");
            // console.log(li[x].innerHTML)
            this.shuxin.push(li[x].innerHTML)
            list.push(keyId);
            list.sort();
            for (var y = 0; y < extend.length; y++) {
              var arr = extend[y].keyId.split(",");
              arr.sort();
              if (list.toString() == arr.toString()) {
                this.showStock = true;
                console.log("返回", arr);
                this.shopIds = arr;
                this.everattr = extend[y];
                // console.log(extend[y].extendVal);
                var showimg = this.list.attributes;
                for (var i = 0; i < arr.length; i++) {
                  for (var j = 0; j < showimg.length; j++) {
                    if (showimg[j].parentId == arr[i]) {
                      console.log(showimg[j].extendName2)
                      this.photo = JSON.parse(showimg[j].extendName2)[0];
                    }
                  }
                }
                // console.log(showimg)
              }
            }
          }
        }

        for (var x = 0; x < extend.length; x++) {
          var e = extend[x];
          if (e.keys == null) {
            var keys = e.keyId.split(",");
            e["keys"] = keys;
          }
          if (e.keys.indexOf(id) != -1) {

            if (this.maps[id] == null) {
              this.maps[id] = {};
              this.maps[id][x] = e;
            } else {
              this.maps[id][x] = e;
            }
          }
        }
        // console.log("xx", this.maps);
      },
      okBtn: function () {
        var that = this;
        if (that.goWhere == 1) {
          that.id = that.$route.query.id;
          console.log(that.everattr.extendId)
          console.log(that.id)
          var data = JSON.stringify({
            "actionName": "insert",
            "controllerName": "userShop",
            "data": [{
              "count": that.num,
              "nexusExtendId": that.everattr.extendId,
              "productId": that.id,
            }]
          });
          axios.post({
            data: data,
            callback(res) {
              alert(res.data.data.remark)
            }
          })
        } else if (that.goWhere == 2) {
          that.goods.keyId = that.everattr.extendId;
          if (that.list.attributes.length == 0) {
            that.goods.price = that.list.price * that.list.discount
          } else {
            that.goods.price = that.everattr.extendVal * that.list.discount;
          }

          that.goods.name = that.list.productName;
          that.goods.img = that.list.images[0];
          that.goods.count = that.num;
          that.goods.productId = that.list.productId;
          that.goods.shopType = "product";
          that.goods.orderType = "shopping";
          that.goods.shuxin = that.shuxin;
          console.log(that.list);
          console.log(that.goods);
          sessionStorage.setItem('nowBuy', JSON.stringify(that.goods));
          that.$router.push('/nowBuy');
        }

      },
      scshow: function () {
        var that = this;
        if (localStorage.getItem('userToken')) {
          var data = JSON.stringify({
            "actionName": "insert",
            "controllerName": "userOperationRecord",
            "data": [{
              "operationType": "collection",
              "productId": this.list.productId,
              "type": "product"
            }]
          });
          axios.post({
            data: data,
            callback(res) {
              console.log(res.data);
              if (that.sc) {
//                $('.sc>span').css('color','#000');
                document.querySelector('.iconCollect').style.color = '#313131';
                document.querySelector('.collect-text').style.color = '#313131';
                that.sc = false;
              } else {
//                $('.sc>span').css('color','#f4b429');
                document.querySelector('.iconCollect').style.color = '#f4b429';
                document.querySelector('.collect-text').style.color = '#f4b429';
                that.sc = true;
              }
            }
          })
        } else {
          that.$router.push('/login');
        }

      },
      _initScroll: function () {
        this.scroll = new BScroll(this.$refs.detailsWrapper, {click: true});
        console.log('bbbb');
//        this.scroll.on('scrollEnd', (pos) => {
//          // 下拉动作
//          console.log('ssss'+ pos.y);
//          if (pos.y < -44) {
//            console.log('sssssssssssss')
//            document.querySelector('.details-nav').style.backgroundColor = '#fff';
//          }else{
//            document.querySelector('.details-nav').style.backgroundColor = 'rgba(0,0,0,0)';
//          }
//        });
      }
    },
  };
</script>

<style type="text/scss" lang="scss">
  .details {
    .details-nav {
      width: 100%;
      height: 44px;
      position: absolute;
      top: 0;
      background-color: rgba(0, 0, 0, 0);
      z-index: 10;
      .left, .right {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        text-align: center;
        line-height: 30px;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        top: 7px;
        i {
          color: #FFFFFF;
        }
      }
      .left {
        left: 10px;
      }
      .right {
        right: 10px;
      }
    }
    .details-wrapper {
      width: 100%;
      height: calc(100% - 49px);
      position: absolute;
      top: 0;
      overflow: hidden;
      .detailsImg {
        width: 100vw;
        height: 80vw;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .main {
        padding: 0 8px;
        background-color: #FFFFFF;
        .box {
          .title {
            font-weight: 700;
            height: 40px;
            line-height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .show {
            width: 100%;
            /*height: 30px;*/
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            .discount_price {
              color: red;
              font-size: 18px;
            }

            .original_price {
              font-size: 10px;
              color: gray;
              text-decoration: line-through;
              padding: 0 8px;
              border-right: 1px solid #e3e3e3;
            }
            .wenzi {
              font-size: 14px;
              font-weight: 700;
              color: red;
              margin-left: 8px;
            }
          }
          .miaoshu {
            width: 100%;
            display: flex;
            justify-content: space-between;
            /*margin-top: 30px;*/
            padding: 10px 0;
            border-top: 1px solid #f5f5f5;
            li:nth-child(1) {
              width: 25%;
              img {
                width: 90%;
                height: 90%;
              }
            }
            li:nth-child(2) {
              width: 75%;
              font-size: 12px;
            }
            p {
              font-size: 12px;
            }
          }
        }
        .zdcn {
          padding: 10px 0;
          border-top: 1px solid #f5f5f5;
          p {
            text-align: center;
            font-weight: 700;
          }
          ul {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            li {
              width: 25%;
              /*height: 25vw;
              line-height: 25vw;*/
              text-align: center;
              /*display: flex;*/
              /*flex-direction: column;*/
              img {
                /*width: 60%;height: 60%;*/
                width: 50px;
                height: 50px;
              }
            }
          }
        }
        .gmxz {
          display: flex;
          justify-content: space-around;
          margin-bottom: 4px;
          border-top: 1px solid #f5f5f5;
          li {
            text-align: center;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
          }
          .active {
            color: red;
            border-bottom: 1px solid red;
          }
        }
      }
    }
    #detail {
      display: none;
      position: fixed;
      bottom: 0px;
      left: 0;
      background-color: #fff;
      width: 100%;
      padding: 8px;
      z-index: 100000;
      font-size: 12px;
      /*color: gray;*/
      // display: none;
      .top {
        width: 100%;
        height: 80px;
        border-bottom: 1px solid #e3e3e3;
        border-top: 1px solid #e3e3e3;
        .imgBox {
          display: block;
          position: absolute;
          left: 20px;
          top: -20px;
          width: 80px;
          height: 80px;
          padding: 8px;
          background-color: #fff;
          border: 1px solid #e3e3e3;
          border-radius: 6px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .exitdetail {
          font-size: 24px;
          position: absolute;
          right: 26px;
          top: 10px;
          color: gray;
        }
        .price1 {
          margin-left: 120px;
          margin-top: 4px;
        }
        .stock1 {
          margin-left: 120px;
          margin-top: 4px;
        }
        .goodsName {
          display: flex;
          justify-content: left;
          margin-left: 120px;
          margin-top: 4px;
          span {
            margin-right: 8px;
          }
        }
      }
      .foot {
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-top: 1px solid #e3e3e3;
        display: flex;
        justify-content: space-between;
        .numBox {
          display: inline-block;
          width: 120px;
          height: 30px;
          margin-top: 15px;
          margin-right: 18px;
          border: 1px solid #ccc;
          display: flex;
          justify-content: space-between;
          button {
            width: 36px;
            font-size: 20px;
            color: gray;
            border: none;
          }
          .up {
            font-size: 16px;
          }
          input {
            width: 40px;
            text-align: center;
          }
        }
      }
      .con {
        div {
          display: flex;
          flex-wrap: wrap;
          p {
            width: 100%;
            height: 24px;
            line-height: 24px;
          }
          li {
            padding: 2px;
            border: 1px solid #BEBEBE;
            margin: 4px 4px 4px 8px;
            border-radius: 4px;
          }
        }
      }
      .okBtn {
        height: 40px;
        line-height: 40px;
        width: 100%;
        background-color: red;
        color: #fff;
        font-size: 16px;
        text-align: center;
      }
    }
    footer {
      position: fixed;
      left: 0;
      bottom: 0;
      height: 49px;
      border-top: 1px solid #e3e3e3;
      line-height: 50px;
      text-align: center;
      ul {
        display: flex;
        justify-content: space-between;
        .sc {
          width: 20vw;
          height: 50px;
          border-right: 1px solid #e3e3e3;
          display: flex;
          flex-direction: column;
          background-color: #FFFFFF;
          span {
            height: 20px;
            line-height: 20px;
            font-size: 14px;
          }
          span:first-child {
            font-size: 20px;
          }
        }
        .addCart {
          color: #fff;
          width: 40vw;
          height: 100%;
          border-right: 1px solid #e3e3e3;
          background-image: -webkit-linear-gradient(to right, #FFB90F, #FFA54F);
          background-image: linear-gradient(to right, #FFB90F, #FFA54F);
        }
        .nowBuy {
          color: #fff;
          width: 40vw;
          height: 100%;
          background-image: linear-gradient(to right, #FFB90F, #FF4040);
          background-image: -webkit-linear-gradient(to right, #FFB90F, #FF4040);
        }
      }
    }
  }
</style>
